<template>
    <div class="container">
        <div class="header">
            <span>状态：</span>
            <el-select class="status-select" v-model="state" size="small" placeholder="请选择">
                <el-option label="全部" value></el-option>
                <el-option label="初审中" :value="0"></el-option>
                <el-option label="再审中" :value="1"></el-option>
                <el-option label="终审中" :value="2"></el-option>
                <el-option label="待转款" :value="3"></el-option>
                <el-option label="已完成" :value="4"></el-option>
                <el-option label="已拒绝" :value="5"></el-option>
                <el-option label="已撤销" :value="6"></el-option>
            </el-select>
            <span>手机号：</span>
            <el-input class="phone" v-model="phone" size="small" clearable @clear="getData"></el-input>
            <el-button type="primary" size="small" @click="getData">查询</el-button>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="loading">
            <el-table-column prop="brandid" label="id"></el-table-column>
            <el-table-column prop="brand.name" label="商家名称"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column label="时间">
                <template #default="scope">
                    <span>{{ scope.row.begintime }}</span>
                    -
                    <span>{{ scope.row.endtime }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="提现金额"></el-table-column>
            <el-table-column prop="addtime" label="申请时间"></el-table-column>
            <el-table-column label="申请状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 0" size="mini">初审中</el-tag>
                    <el-tag v-if="scope.row.status === 1" size="mini">再审中</el-tag>
                    <el-tag v-if="scope.row.status === 2" size="mini">终审中</el-tag>
                    <el-tag v-if="scope.row.status === 3" size="mini">待转款</el-tag>
                    <el-tag v-if="scope.row.status === 4" size="mini">已完成</el-tag>
                    <el-tag v-if="scope.row.status === 5" size="mini">已拒绝</el-tag>
                    <el-tag v-if="scope.row.status === 6" size="mini">已撤销</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button
                        v-if="scope.row.status === 0"
                        type="primary"
                        size="mini"
                        @click="openDialog(scope.row, 1)"
                    >初审</el-button>
                    <el-button
                        v-if="scope.row.status === 1"
                        type="primary"
                        size="mini"
                        @click="openDialog(scope.row, 1)"
                    >复审</el-button>
                    <el-button
                        v-if="scope.row.status === 2"
                        type="primary"
                        size="mini"
                        @click="openDialog(scope.row, 1)"
                    >终审</el-button>
                    <el-button
                        v-if="scope.row.status === 3"
                        type="primary"
                        size="mini"
                        @click="openDialog(scope.row, 2)"
                    >完成转款</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="openDialog(scope.row, 3)"
                    >查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="list.length" class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.num"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog title :visible.sync="dialogVisible" width="750px">
            <div class="dialog-inner">
                <el-form label-width="100px">
                    <el-form-item label="附件图:">
                        <ImgUploader v-model="form.picture" />
                    </el-form-item>
                    <el-form-item label>
                        <el-button @click="postData" type="primary">提 交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title :visible.sync="auditDialogVisible" width="750px" @closed="resetForm">
            <div class="dialog-inner">
                <el-form label-width="100px">
                    <el-form-item label="审核:">
                        <el-radio v-model="audit" :label="1">通过</el-radio>
                        <el-radio v-model="audit" :label="2">拒绝</el-radio>
                    </el-form-item>
                    <el-form-item v-if="audit === 2" label="原因:">
                        <el-input v-model="form.remarks" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label>
                        <el-button @click="auditDialogVisible = false" size="mini">取消</el-button>
                        <el-button @click="auditDo" type="primary" size="mini">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="订单列表" :visible.sync="orderDialogVisible" width="980px">
            <div class="dialog-inner">
                <el-table :data="orderList" border style="width: 100%">
                    <el-table-column prop="id" label="id" width="50"></el-table-column>
                    <el-table-column label="商品图" width="120">
                        <template #default="scope">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="scope.row.pic"
                                :preview-src-list="[scope.row.pic]"
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称"></el-table-column>
                    <el-table-column prop="orderSn" label="订单号"></el-table-column>
                    <el-table-column prop="updatetime" label="时间"></el-table-column>
                    <el-table-column prop="price" label="价格" width="100"></el-table-column>
                </el-table>
                <div v-if="orderList.length" class="pagination">
                    <el-pagination
                        @current-change="handleOrderCurrentChange"
                        :current-page="orderPage.num"
                        :page-size="orderPage.size"
                        layout="total, prev, pager, next"
                        :total="orderPage.total"
                    ></el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import * as request from "@/api/withdraw";
import ImgUploader from "@/components/ImgUploader";
export default {
    components: {
        ImgUploader
    },
    data() {
        return {
            state: "",
            phone: "",
            begintime: "",
            endtime: "",
            list: [],
            orderList: [],
            loading: false,
            dialogVisible: false,
            auditDialogVisible: false,
            orderDialogVisible: false,
            audit: "",
            form: {
                id: "",
                picture: "",
                audit: "",
                status: "",
                remarks: ""
            },
            page: {
                size: 10,
                num: 1,
                total: 0
            },
            orderPage: {
                size: 5,
                num: 1,
                total: 0
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        handleCurrentChange(val) {
            this.page.num = val;
            this.getData();
        },
        handleOrderCurrentChange(val) {
            this.orderPage.num = val;
            this.getDetail();
        },
        /* 获取列表数据 */

        async getData() {
            this.loading = true;
            let query = {
                state: this.state,
                phone: this.phone,
                begintime: this.begintime,
                endtime: this.endtime,
                num: this.page.num,
                size: this.page.size
            };
            try {
                const { errno, data, errmsg } = await request.merchantList(query);
                if (errno === 0) {
                    this.list = data.list || [];
                    this.page.num = data.pageNum;
                    this.page.total = data.total;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
            this.loading = false;
        },

        openDialog(item, type) {
            this.form.id = item.id;
            if (type === 1) {
                this.form.status = item.status;
                this.auditDialogVisible = true;
            } else if (type === 2) {
                this.dialogVisible = true;
            } else if (type === 3) {
                this.orderDialogVisible = true;
                this.getDetail();
            }
        },
        resetForm() {
            this.audit = "";
            this.form.id = "";
            this.form.picture = "";
            this.form.audit = "";
            this.form.status = "";
            this.form.remarks = "";
        },

        async auditDo() {
            if (!this.audit) {
                return this.$message.warning("请选择审核");
            }
            let params = {
                id: this.form.id
            };
            let requestName = ''
            switch (this.form.status) {
                case 0:
                    requestName = 'merchantAudit'
                    break;
                case 1:
                    requestName = 'merchantTwoAudit'
                    break;
                case 2:
                    requestName = 'merchantThreeAudit'
                    break;
                default:
                    break;
            }
            if (this.audit === 1) {
                params.status = this.form.status + 1;
            } else {
                params.status = 5;
                params.remarks = this.form.remarks;
            }
            try {
                const { errno, errmsg } = await request[requestName](params);
                if (errno === 0) {
                    this.$message.success(errmsg);
                    this.auditDialogVisible = false;
                    this.getData();
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.log(err);
            }
        },

        async postData() {
            if (!this.form.picture) {
                return this.$message.warning("请上传附件图片");
            }
            let params = {
                id: this.form.id,
                status: 4,
                enclosure: this.form.picture
            };
            try {
                const { errno, errmsg } = await request.merchantWithdraw(params);
                if (errno === 0) {
                    this.$message.success(errmsg);
                    this.dialogVisible = false;
                    this.getData();
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.log(err);
            }
        },
        async getDetail() {
            let query = {
                id: this.form.id,
                num: this.orderPage.num,
                size: this.orderPage.size
            };
            try {
                const { errno, data, errmsg } = await request.merchantOrderList(query);
                if (errno === 0) {
                    this.orderList = data.list || [];
                    this.orderPage.num = data.pageNum;
                    this.orderPage.total = data.total;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}
.header {
    margin-bottom: 20px;
    .status-select {
        margin-right: 20px;
    }
    .phone {
        width: 200px;
        margin-right: 10px;
    }
}
.table {
    width: 100%;
    th {
        height: 100px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
    }
    td {
        height: 120px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    button {
        margin: 0 10px;
        width: 110px;
        height: 32px;
        background-color: #3699ff;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        border-radius: 2px;
    }
    .img {
        width: 150px;
        height: 100px;
    }
    .desc {
        width: 500px;
    }
}
.noData {
    margin-top: 40px;
    text-align: center;
    color: #888;
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
</style>
